<script setup lang="ts">
//获取父组件
defineProps(['isCollapse'])
// 导入必要的图标组件
import { Menu, MoreFilled, CircleCheck } from '@element-plus/icons-vue'
import router from '@/router'
import { constantRouter } from '@/router'
import useLayOutSettingStore from '@/store/modules/setting.js'
let LayOutSettingStore = useLayOutSettingStore()
const routerInstance = router
// 定义菜单列表数据
const menuList = constantRouter
const goRouter=(v) =>{
  console.log(v)
  console.log(routerInstance)
  // 路由跳转逻辑
  routerInstance.push(v.index)
}
</script>
<template>
  <el-menu
    default-active="/home"
    class="el-menu-vertical-demo"
    background-color="#001529"
    text-color="#fff"
    active-text-color="#409eff"
    router
    :collapse="LayOutSettingStore.fold"
  >
      <!-- <p>{{ menuList }} </p> -->
      <template v-for="(item, index) in menuList" :key="item.path">
        <!-- 没有子路由 -->
         <template  v-if="!item.children">
        <el-menu-item v-if="!item.meta?.hidden" :index="item.path" @click="goRouter">
          <el-icon>
             <component :is="item.meta?.icon" />
            </el-icon>
          <template #title>            
            <span>{{ item.meta?.title || '未知标题' }}</span>
          </template>
        </el-menu-item>
      </template>


        <!-- 有子路由，且子路由只有一个 -->
         <template  v-else-if="item.children && item.children.length === 1">
        <!-- 只显示子路由，不显示父路由 -->
        <el-menu-item v-if="!item.children[0].meta?.hidden" :index="item.children[0].path" @click="goRouter">
          <el-icon>
             <component :is="item.children[0].meta?.icon" />
            </el-icon>
          <template #title>            
            <span>{{ item.children[0].meta?.title || '未知标题' }}</span>
          </template>
        </el-menu-item>
      </template>

        <!-- 有子路由，且子路由有多个 -->
         <template  v-else>
        <el-sub-menu v-if="!item.meta?.hidden" :index="item.path">
          <template #title>
            <el-icon>
             <component :is="item.meta?.icon" />
            </el-icon>
            <span>{{ item.meta?.title || '未知标题' }}</span>
          </template>
          <!-- 子菜单内容 -->
          <template v-for="child in item.children" :key="child.path">
            <el-menu-item v-if="!child.meta?.hidden" :index="child.path" @click="goRouter">
              <el-icon>
                 <component :is="child.meta?.icon" />
                </el-icon>
              <template #title>
                <span>{{ child.meta?.title || '未知标题' }}</span>
              </template>
            </el-menu-item>
          </template>
        </el-sub-menu>
      </template>
      </template>
    </el-menu>
</template>
<style scoped>
.el-menu-vertical-demo {
  width: 100%;
  height: 100%;
}

/* 优化子菜单展开/折叠动画 */
.el-menu--collapse .el-sub-menu__title .el-sub-menu__icon-arrow {
  display: none;
}

/* 优化子菜单项的间距和样式 */
.el-menu-item {
  transition: all 0.3s ease;
}

.el-menu-item:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
}
</style>